<template>
  <a-card title="代办任务" :bordered="false" class="mb-8">
    <div class="wrap">
      <div
        v-for="(item, index) in dataList.list"
        :key="item.date"
        :hoverable="true"
        class="wrap_item"
        :style="{ width: '30%' }">
        <div class="wrap_content">
          <div class="content_one">
            <div>
              <img class="wrap_image" src="../../../assets/image/hone_1.png" alt="">
            </div>
            <div class="align-middle">{{item.title}}</div>
          </div>
          <div class="wrap-middle">{{item.desc}}</div>
          <div class="wrap-day">{{item.group}}</div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { groupItems } from '@/mock/home-data';
import { reactive } from 'vue';

const dataList = reactive({
  list: groupItems,
});
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .wrap_item {
    padding: 20px;
    background-color: white;
    margin-bottom: 20px;
    box-shadow: 0px 15px 5px #f6f6f6;
    border-radius: 10px;
    .wrap_content {
      display: flex;
      justify-content: space-around;
      .content_one {
        text-align: center;
      }
      .wrap_image {
        width: 30px;
        height: 30px;
      }
    }
    .wrap-middle {
      display: flex;
      align-items: center;
    }
    .wrap-day {
      display: flex;
      align-items: center;
      color: #fc869c;
      font-size: 20px;
    }
  }
}

</style>